<template>
	<div class="address">
		<van-nav-bar title="我的地址" right-text="新增地址" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />

		<div v-for="ad in addresslist">
			<van-swipe-cell>
				<div class="addresscard">
					<div>
						<van-tag style="margin-right: 10px;" mark type="warning">{{ad.receiver_label}}</van-tag>
						<span>{{ad.receiver_name}}</span>
						<span>{{ad.receiver_telephone}}</span>
					</div>
					
					<div>{{ad.receiver_address}}</div>
					
				</div>
				<template #right>
					<div class="address-but">
					<van-button @click="deleteaddress(ad)" text="删除" class="address-but-ws" />
					<van-button @click="editaddress(ad)" text="修改" class="address-but-ws" />
					</div>
				</template>
			</van-swipe-cell>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';
	export default {
		name: 'Address',
		created() {
			this.axios.get(`http://localhost:8080///user/getlogin`).then(res => {
				this.user_ID = res.data.loginUser.user_id;
				this.axios.get(`http://localhost:8080//useraddress/getaddresslist/`).then(res => {
					console.log(res.data.AddressList);
					this.addresslist = res.data.AddressList;
				});
			});
		},
		data() {
			return {
				user_ID: '',
				is_default: 1,
				chosenAddressId: '1',
				addresslist: [],
			}
		},
		methods: {
			//返回
			onClickLeft() {
				this.$router.replace('/personal');
			},
			//新增地址
			onClickRight() {
				this.$router.push({
					name: 'AddressAdd',
					params: {
						address: '',
					}
				});
			},
			//修改地址
			editaddress(ad) {
				this.$router.push({
					name: 'AddressEdit',
					params: {address: ad,}
				});
			},
			
			//地址删除
			deleteaddress(ad) {
				console.log(ad);
				this.axios.get(`http://localhost:8080//useraddress/deleteaddress/` + ad.address_id).then(res => {
					console.log(res.data);
					this.axios.get(`http://localhost:8080//useraddress/getaddresslist/`).then(res => {
						console.log(res.data);
						this.addresslist = res.data.AddressList;
					})
				})
			},
		},
	}
</script>

<style lang="less">
	.address {
		width: 100%;
		overflow: auto;

		.addresscard {
			margin: 5px 5px;
			height: 80px;
			border-radius: 10px;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			div:nth-child(1){
				margin:10px;
				font-size: 18px;
				color: #303133; 
				font-weight: 400; 
				letter-spacing: 1px;
				
			}
			div:nth-child(2){
				margin: 0 10px ;
				font-size: 16px;
				color: #606266; 
				font-weight: 400; 
				letter-spacing: 1px;
			}
		}
		.address-but{
			display: flex;
			flex-direction: column;
		}
		.address-but-ws{
			margin-bottom: 5px;
			border-radius: 10px;
			width: 60px;
			height: 40px;
		}
	}
</style>
